<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>商品类别</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <Button-group>
              <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                删除
              </Button>
              <Button custom-icon="iconfont icon-fangkuai2" size="small" type="primary" @click="showCreateModal">
                新建大类
              </Button>
            </Button-group>
          </div>
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"
                   @on-selection-change="selectionChange"></Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page"
                  @on-change="changePage" @on-page-size-change="onPageSizeChange" show-elevator show-total
                  show-sizer></Page>
          </div>
        </div>

        <!--新建&修改 大类-->
        <Modal v-model="modal.mallCategory.isShow" :loading="modal.mallCategory.loading" :mask-closable="false"
               :title="modal.mallCategory.title" @on-ok="postData">
          <Form ref="systemFrom" :model="modal.mallCategory.formData" :rules="modal.mallCategory.rules"
                :label-width="120">
            <FormItem label="类目名称" prop="name">
              <Input placeholder="请输入类目名称" v-model="modal.mallCategory.formData.name" style="width:300px;"/>
            </FormItem>
            <FormItem label="上传/修改图片" prop="iconUrl">
              <upload-image v-if="modal.mallCategory.isShow"  ref="upload" :uploadList.sync="modal.mallCategory.formData.uploadList" @imageupload="calcImg" imgSize="1"></upload-image>
            </FormItem>
          </Form>
        </Modal>
        <!--新建&修改 小类-->
        <Modal v-model="modal.mallCategory.Show" :loading="modal.mallCategory.load" :mask-closable="false"
               :title="modal.mallCategory.title" @on-ok="postDat">
          <Form ref="systemFro" :model="modal.mallCategory.formData" :rules="modal.mallCategory.rules"
                :label-width="120">
            <FormItem label="父类目ID" prop="pid">
              <Input placeholder="请输入父类目ID"  disabled  v-model="modal.mallCategory.formData.id" style="width:300px;"/>
            </FormItem>
            <FormItem label="子类类目名称" prop="name">
              <Input placeholder="请输入类目名称" v-model="modal.mallCategory.formData.name" style="width:300px;"/>
            </FormItem>
            <FormItem label="上传图片" prop="iconUrl">
              <upload-image  v-if="modal.mallCategory.Show"   ref="upload" :uploadList.sync="modal.mallCategory.formData.uploadList" @imageupload="calcImg" imgSize="1"></upload-image>
            </FormItem>
          </Form>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import submenu from '@/view/mall/submenu/MallCategory'
import MallCategoryApi from '@/api/mall/MallCategory.js'
// import moment from 'moment'
import { Message } from 'iview'
import WangEditor from '@/components/Editor/WangEditor.vue'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'

export default {
  name: 'mallCategory',
  components: {
    uploadImage,
    WangEditor,
    Uploadoss
  },
  data () {
    return {
      // 弹出层数据
      modal: {
        mallCategory: {
          isShow: false,
          loading: true,
          Show: false,
          load: true,
          type: 'create', // create 新建，update 修改
          title: '新建',
          formData: {}
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          }, {
            type: 'expand',
            width: 60,
            align: 'center',
            render: (h, params) => {
              return this.$createElement(submenu, {
                ref: 'child',
                props: {
                  row: params.row
                }

              })
            }
          },
          /** 开始自动生成 */
          { title: 'id', minWidth: 80, key: 'id', align: 'center' },
          { title: '类目名称', minWidth: 100, key: 'name', align: 'center' },
          { title: '父类目ID', minWidth: 80, key: 'pid', align: 'center' },
          { title: '类目图标',
            minWidth: 100,
            key: 'iconUrl',
            align: 'center',
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.iconUrl
                },
                style: {
                  width: '50%',
                  height: '50%'
                }
              })
            } },
          { title: '级别', minWidth: 80, key: 'level', align: 'center' },
          // { title: '排序', key: 'sortOrder' },
          {
            title: '创建时间',
            align: 'center',
            key: 'createTime',
            minWidth: 100
          },
          {
            title: '更新时间',
            align: 'center',
            key: 'updateTime',
            minWidth: 100
          },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '添加子类'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showCreateModa([params.row])
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: 'md-add-circle',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData([params.row.id])
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      MallCategoryApi.getPageList(that.queryData)
        .then(res => {
          let list = res.data.list
          for (let i = 0; i < list.length; i++) {
            if (list[i].pid === 0) {
              list[i].pid = '一级分类'
            } else {
              list[i].pid = '二级分类'
            }
          }
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch(error => {
          Message.error(error)
        })
    },

    // 新建&修改
    postData () {
      const that = this
      that.$refs['systemFrom'].validate(valid => {
        if (valid) {
          if (!that.modal.mallCategory.formData.id) { // 新建
            MallCategoryApi.add(that.modal.mallCategory.formData)
              .then(res => {
                that.modal.mallCategory.isShow = false
                that.modal.mallCategory.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          } else { // 修改
            MallCategoryApi.update(
              that.modal.mallCategory.formData.id,
              that.modal.mallCategory.formData
            )
              .then(res => {
                that.modal.mallCategory.isShow = false
                that.modal.mallCategory.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch(error => {
                Message.error(error)
              })
          }
        } else {
          that.modal.mallCategory.loading = false
          that.$nextTick(() => {
            that.modal.mallCategory.loading = true
          })
        }
      })
    },
    // 图片校验
    calcImg () {
      let imgUrl = this.modal.mallCategory.formData.uploadList.map(v => {
        if (v.length < 1) return v
        v = v.response.res.requestUrls[0]
        return v
      })
      this.modal.mallCategory.formData.iconUrl = imgUrl[0]
    },
    // 新建&修改
    postDat () {
      const that = this
      that.$refs['systemFro'].validate(valid => {
        if (valid) {
          MallCategoryApi.addzi(that.modal.mallCategory.formData)
            .then(res => {
              that.modal.mallCategory.Show = false
              that.modal.mallCategory.load = false
              if (!res.code) {
                that.getTableData()
                that.$Notice.success({
                  title: '保存成功!'
                })
              } else {
                that.$Notice.error({
                  title: res.message
                })
              }
            })
            .catch(error => {
              Message.error(error)
            })
        } else {
          that.modal.mallCategory.load = false
          that.$nextTick(() => {
            that.modal.mallCategory.load = true
          })
        }
      })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
            '<p>您确认删除id为 <strong>' +
            ids.toString() +
            '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallCategoryApi.del({
            ids: ids
          }).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach(element => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },

    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },

    // 显示新建弹窗
    showCreateModal () {
      this.modal.mallCategory.type = 'create'
      this.modal.mallCategory.title = '新建'
      this.modal.mallCategory.formData = {}
      this.modal.mallCategory.isShow = true
    },
    //
    // showCreateZilei (id) {
    //   this.modal.mallCategory.type = 'create'
    //   this.modal.mallCategory.title = '新建子类'
    //   this.modal.mallCategory.formData.id = id
    //   this.modal.mallCategory.Show = true
    // },
    // 显示新建子菜单弹窗
    showCreateModa (e) {
      this.modal.mallCategory.type = 'create'
      this.modal.mallCategory.title = '新建'
      this.modal.mallCategory.formData = {}
      this.modal.mallCategory.formData.level = 'L2'
      //  this.modal.mallCategory.formData.code = e[0].code
      this.modal.mallCategory.formData.id = e[0].id
      this.modal.mallCategory.Show = true
    },

    // 显示修改弹窗
    showUpdateModal (id) {
      this.modal.mallCategory.type = 'update'
      this.modal.mallCategory.title = '修改'
      // 不请求后端，直接list取对象
      // this.modal.mallCategory.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      const that = this
      MallCategoryApi.getDetail(id).then(res => {
        that.modal.mallCategory.formData = res.data
        let item = {
          status: 'finished',
          response: {
            res: {
              requestUrls: []
            }
          }
        }
        item.response.res.requestUrls.push(that.modal.mallCategory.formData.iconUrl)
        that.modal.mallCategory.formData.uploadList = []
        that.modal.mallCategory.formData.uploadList.push(item)
        that.modal.mallCategory.formData = res.data
      })
        .catch(error => {
          Message.error(error)
        })
      this.modal.mallCategory.isShow = true
    }

  },
  created () {
    this.getTableData()
  }
}
</script>
